<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>state-举例</title>
</head>
<body>
   <div id="app">

   </div>
</body>
<script src="../lib/react/react.development.js"></script>
<script src="../lib/react/react-dom.development.j.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

<script type="text/babel">



        /*
         *
         *    1.数据驱动
         *    2. 组件化
        * */


      class Clock extends  React.Component{

           constructor(props){
               super(props);
               this.state= {
                    date:new Date()
               }
           }

           componentDidMount(){

               //间隔一秒刷新一次

             this.timer=  setInterval(()=>this.tick(),1000);
           }

           componentWillUnmount(){
              clearInterval(this.timer)
          }


           // 数据驱动 --- 改变state的值
           tick(){
               this.setState(
                   {
                       date:new Date()
                   }
               )
           }

           render(){

                return (
                    <div>
                        <h1>Hello</h1>
                        <h2>现在是-{this.state.date.toLocaleTimeString()}</h2>
                    </div>
                )
           }

      }

      ReactDOM.render(<Clock/>,document.getElementById('app'));


</script>



</html>